import { useLocation, useNavigate } from 'react-router-dom'
import { QrCode, User } from 'lucide-react'

export const BottomNavigation = () => {
  const location = useLocation()
  const navigate = useNavigate()
  
  const navItems = [
    {
      path: '/ticket',
      label: '验票',
      icon: QrCode
    },
    {
      path: '/profile',
      label: '我的',
      icon: User
    }
  ]
  
  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 safe-area-pb">
      <div className="flex">
        {navItems.map((item) => {
          const Icon = item.icon
          const isActive = location.pathname === item.path
          
          return (
            <button
              key={item.path}
              onClick={() => navigate(item.path)}
              className={`flex-1 flex flex-col items-center justify-center py-2 px-4 ${
                isActive 
                  ? 'text-purple-600' 
                  : 'text-gray-500'
              }`}
            >
              <Icon size={24} />
              <span className="text-xs mt-1">{item.label}</span>
            </button>
          )
        })}
      </div>
    </div>
  )
}

